<template>
  <view>
    <view class="btn" @click="handleShowFilterPopup">筛选</view>
    <!-- 筛选弹框 -->
    <up-popup mode="right" :round="10" :show="showFilterPopup" @close="handleHideFilterPopup">
      <view class="popup">
        <view class="popup__header">
          <view class="title">筛选</view>
        </view>
        <view class="popup__content">
          <scroll-view class="form" scroll-y>
            <view class="form-item">
              <view class="form-item-label">用户昵称</view>
              <view class="form-item-value">
                <up-input v-model="formData.nickname" fontSize="24rpx" customStyle="height:36rpx" placeholder="请输入用户昵称"></up-input>
              </view>
            </view>
            <view class="form-item">
              <view class="form-item-label">会员ID</view>
              <view class="form-item-value">
                <up-input v-model="formData.id" fontSize="24rpx" customStyle="height:36rpx" placeholder="请输入会员ID"></up-input>
              </view>
            </view>
            <view class="form-item">
              <view class="form-item-label">手机号</view>
              <view class="form-item-value">
                <up-input v-model="formData.mobile" fontSize="24rpx" customStyle="height:36rpx" placeholder="请输入手机号"></up-input>
              </view>
            </view>
            <view class="form-item">
              <view class="form-item-label">门店</view>
              <view class="form-item-value">
                <f-store-picker v-model:value="formData.store_id"></f-store-picker>
              </view>
            </view>
            <view class="form-item">
              <view class="form-item-label">停止看课天数</view>
              <view class="form-item-value">
                <view class="flex">
                  <up-input v-model="formData.look_start_day" fontSize="24rpx" customStyle="height:36rpx" placeholder="请输入最小值"></up-input>
                  <view style="padding: 0 10rpx">-</view>
                  <up-input v-model="formData.look_end_day" fontSize="24rpx" customStyle="height:36rpx" placeholder="请输入最大值"></up-input>
                </view>
              </view>
            </view>
            <view class="form-item">
              <view class="form-item-label">参与活动数</view>
              <view class="form-item-value">
                <view class="flex">
                  <up-input v-model="formData.canyu_min" fontSize="24rpx" customStyle="height:36rpx" placeholder="请输入最小值"></up-input>
                  <view style="padding: 0 10rpx">-</view>
                  <up-input v-model="formData.canyu_max" fontSize="24rpx" customStyle="height:36rpx" placeholder="请输入最大值"></up-input>
                </view>
              </view>
            </view>
            <view class="form-item">
              <view class="form-item-label">红包个数</view>
              <view class="form-item-value">
                <view class="flex">
                  <up-input v-model="formData.hongbao_min_num" fontSize="24rpx" customStyle="height:36rpx" placeholder="请输入最小值"></up-input>
                  <view style="padding: 0 10rpx">-</view>
                  <up-input v-model="formData.hongbao_max_num" fontSize="24rpx" customStyle="height:36rpx" placeholder="请输入最大值"></up-input>
                </view>
              </view>
            </view>
            <view class="form-item">
              <view class="form-item-label">红包金额</view>
              <view class="form-item-value">
                <view class="flex">
                  <up-input v-model="formData.money_min" fontSize="24rpx" customStyle="height:36rpx" placeholder="请输入最小值"></up-input>
                  <view style="padding: 0 10rpx">-</view>
                  <up-input v-model="formData.money_max" fontSize="24rpx" customStyle="height:36rpx" placeholder="请输入最大值"></up-input>
                </view>
              </view>
            </view>
            <view class="form-item">
              <view class="form-item-label">积分数量</view>
              <view class="form-item-value">
                <view class="flex">
                  <up-input v-model="formData.jifen_min" fontSize="24rpx" customStyle="height:36rpx" placeholder="请输入最小值"></up-input>
                  <view style="padding: 0 10rpx">-</view>
                  <up-input v-model="formData.jifen_max" fontSize="24rpx" customStyle="height:36rpx" placeholder="请输入最大值"></up-input>
                </view>
              </view>
            </view>
            <view class="form-item">
              <view class="form-item-label">邀请人数</view>
              <view class="form-item-value">
                <view class="flex">
                  <up-input v-model="formData.yaoqing_min" fontSize="24rpx" customStyle="height:36rpx" placeholder="请输入最小值"></up-input>
                  <view style="padding: 0 10rpx">-</view>
                  <up-input v-model="formData.yaoqing_max" fontSize="24rpx" customStyle="height:36rpx" placeholder="请输入最大值"></up-input>
                </view>
              </view>
            </view>
            <view class="form-item">
              <view class="form-item-label">注册时间</view>
              <view class="form-item-value">
                <view class="flex flex-wrap" style="margin-top: 10rpx;">
                  <up-tag class="mb-[10rpx] mr-[10rpx]" v-for="(item, index) in dateTypeList" :key="index" size="mini" @click="handleSelectDate(item.value)" :plain="formData.reg_time_type !== item.value">{{item.text}}</up-tag>
                </view>
                <view v-if="formData.reg_time_type == -1" class="date-range flex mt-[10rpx]" @click="handleShowCalendar('reg')">
                  <up-input :modelValue="formatDate(formData.reg_start_time)" fontSize="24rpx" customStyle="height:36rpx" readonly placeholder="请选择开始时间"></up-input>
                  <view style="padding: 0 20rpx">-</view>
                  <up-input :modelValue="formatDate(formData.reg_end_time)" fontSize="24rpx" customStyle="height:36rpx" readonly placeholder="请选择开始结束"></up-input>
                </view>
              </view>
            </view>
            <view class="form-item">
              <view class="form-item-label">用户状态</view>
              <view class="form-item-value">
                <view class="flex flex-wrap">
                  <up-tag class="mb-[10rpx] mr-[10rpx]" v-for="(item, index) in userStatusList" :key="index" :plain="formData.status != item.value" size="mini" @click="handleSelectUserStatus(item)">{{item.text}}</up-tag>
                </view>
              </view>
            </view>
          </scroll-view>
        </view>
        <view class="popup__footer">
          <up-button type="primary" plain size="small" @click="handleReset">重置</up-button>
          <up-button class="ml-[20rpx]" type="primary" size="small" @click="handleConfirm">确定</up-button>
        </view>
      </view>
    </up-popup>
    <up-calendar :show="showCalendar" :defaultDate="defaultDateMultiple" minDate="2021-01-01" maxDate="2030-12-31" allowSameDay mode="range" @confirm="handleDateChange" @close="handleHideCalendar"></up-calendar>
  </view>

</template>

<script lang="ts" setup>
import dayjs from 'dayjs';
import { computed, onMounted, ref, watch } from 'vue';
import FStorePicker from '@/addon/htscrm/components/f-store-picker/index.vue'

interface Member {
  /** 会员ID */
  id: string;
  /** 姓名 */
  nickname: string;
  /** 手机号 */
  mobile: string;
  /** 标签 */
  tag: string;
  /** 停止看课开始天数 */
  look_start_day: string;
  /** 停止看课结束天数 */
  look_end_day: string;
  /** 参与活动最小数 */
  canyu_min: string;
  /** 参与活动最大数 */
  canyu_max: string;
  /** 红包最小个数 */
  hongbao_min_num: string;
  /** 红包最大个数 */
  hongbao_max_num: string;
  /** 红包最小金额 */
  money_min: string;
  /** 红包最大金额 */
  money_max: string;
  /** 积分最小数量 */
  jifen_min: string;
  /** 积分最大数量 */
  jifen_max: string;
  /** 邀请人数最小值 */
  yaoqing_min: string;
  /** 邀请人数最大值 */
  yaoqing_max: string;
  /** 注册开始时间 */
  reg_start_time: number|null;
  /** 注册结束时间 */
  reg_end_time:  number|null;
  reg_time_type: number;
  /** 用户状态 */
  status: number;
  /** 店铺ID列表 */
  store_id: string[];
  /** 店铺名称 */
  store_name: string;
}

const defaultData = {
  /** 会员ID */
  id: '',
  /** 姓名 */
  nickname: '',
  /** 手机号 */
  mobile: '',
  /** 标签 */
  tag: '',
  /** 停止看课天数 */
  look_start_day: '',
  look_end_day: '',
  /** 参与活动数 */
  canyu_min: '',
  canyu_max: '',
  /** 红包个数 */
  hongbao_min_num: '',
  hongbao_max_num: '',
  /** 红包金额 */
  money_min: '',
  money_max: '',
  /** 积分数量 */
  jifen_min: '',
  jifen_max: '',
  /** 邀请人数 */
  yaoqing_min: '',
  yaoqing_max: '',
  /** 注册时间 */
  reg_start_time: null,
  reg_end_time: null,
  reg_time_type: 0,
  /** 用户状态 */
  status: -2,
  /** 店铺ID */
  store_id: [],
  /** 店铺名称 */
  store_name: ''
}

const prop = defineProps({
  value: {
    type: Object,
    default: () => ({})
  }
})


const showFilterPopup = ref(false);
const formData = ref<Member>(Object.assign({}, defaultData));

const showStoreModal = ref(false)
const storeList = ref<any[]>([])

const showCalendar = ref(false);
const dateKey = ref('');
/** 标签选项 */
const tagList = ref([
  {
    text: "全部",
    value: ''
  },
  {
    text: "微信小程序",
    value: 1
  },
  {
    text: "手动导入",
    value: 2
  },
  {
    text: "收银台",
    value: 3
  },
  {
    text: "手动创建",
    value: 4
  },
])
/** 用户状态选项 */
const userStatusList = ref([
  {
    text: "全部",
    value: -2
  },
  {
    text: "正常",
    value: 1
  },
  {
    text: "待审核",
    value: 2
  },
  {
    text: "已拒绝",
    value: 3
  },
  {
    text: "黑名单",
    value: -1
  },
])
/** 日期选项 */
const dateTypeList = ref([
  {
    text: "昨天",
    value: 1
  },
  {
    text: "最近三天",
    value: 3
  },
  {
    text: "最近七天",
    value: 7
  },
  {
    text: "自定义",
    value: -1
  },
])




const defaultDateMultiple = computed(() => {

  if(formData.value.reg_start_time && formData.value.reg_end_time) {
    return [dayjs(formData.value.reg_start_time * 1000).format('YYYY-MM-DD'), dayjs(formData.value.reg_end_time * 1000).format('YYYY-MM-DD')]
  }

  const d = new Date();
  const year = d.getFullYear();
  let month:any = d.getMonth() + 1;
  month = month < 10 ? `0${month}` : month;
  const date = d.getDate();
  console.log([`${year}-${month}-${date}`, `${year}-${month}-${date}`]);
  
  return [`${year}-${month}-${date}`, `${year}-${month}-${date}`];
})

watch(prop.value, (value) => {
  Object.assign(formData.value, value)
}, {
  immediate: true
})

const emit = defineEmits(['confirm'])

function handleShowFilterPopup() {
  showFilterPopup.value = true
}

function handleHideFilterPopup() {
  showFilterPopup.value = false
}

function handleShowCalendar(key:string) {
  dateKey.value = key
  showCalendar.value = true
}

function handleHideCalendar() {
  dateKey.value = ''
  showCalendar.value = false
}
function handleDateChange(e:any) {
  formData.value.reg_start_time = dayjs(e[0]).set('hour', 0).set('minute', 0).set('second', 0).unix()
  formData.value.reg_end_time = dayjs(e[1]).set('hour', 23).set('minute', 59).set('second', 59).unix()
  showCalendar.value = false
}
function getDateRange(num: number) {
  const today = new Date();
  const yesterday = new Date(today);
  yesterday.setDate(today.getDate() - num);
  today.setDate(today.getDate() - 1);

  // 设置昨天的开始时间为00:00:00
  yesterday.setHours(0, 0, 0, 0);

  // 设置昨天的结束时间为23:59:59.999
  const endOfYesterday = new Date(today);
  endOfYesterday.setHours(23, 59, 59, 999);

  return {
      start: yesterday,
      end: endOfYesterday
  };
}

function handleSelectDate(type:number) {
  // 选择昨天
  const { start, end } = getDateRange(type)
  formData.value.reg_time_type = type
  formData.value.reg_start_time = dayjs(start.getTime()).unix()
  formData.value.reg_end_time = dayjs(end.getTime()).unix()
}

 function formatDate(value: number|null) {
  return value ? dayjs(Number(value)*1000).format('YYYY-MM-DD') : ''
 }

function handleSelectUserStatus(item:any) {
  formData.value.status = item.value
}

function handleConfirm() {
  console.log(formData.value);
  showFilterPopup.value = false
  emit('confirm', formData.value)
}

function handleReset() {
  showFilterPopup.value = false
  formData.value = Object.assign({}, defaultData)
  emit('confirm')
}


</script>

<style lang="scss" scoped>
::v-deep .up-input__wrap{
  border: 2rpx solid #eee;
  padding: 20rpx 24rpx !important;
  &::after {
    display: none;
  }

  .up-input__self {
    font-size: 28rpx !important;
  }

  .u-input__content__field-wrapper__field {
    height: 36rpx !important;
  }
}
.btn {
  white-space: nowrap;
  margin-left: 20rpx;
}
.popup {
  width: 80vw;
  height: 100vh;
  background-color: #fff;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  line-height: normal;

  .popup__header {
    height: 100rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    border-bottom: 1px solid #f6f7f8;
  }

  .popup__content {
    flex: 1;
    overflow: hidden;
    padding: 15rpx 0;
  }
  .form {
    height: 100%;

    .form-item {
      padding: 10rpx 0;
      position: relative;
      // &::after {
      //   content: "";
      //   width: 100%;
      //   height: 1px;
      //   background-color: #f6f7f8;
      //   position: absolute;
      //   left: 30rpx;
      //   bottom: 0;
      // }
    }

    .form-item-label {
      padding: 0 30rpx;
      font-size: 24rpx;
      color: #999;
    }

    .form-item-value {
      margin-top: 10rpx;
      padding: 0 30rpx;
      .flex {
        display: flex;
        align-items: center;
        &.wrap {
          flex-wrap: wrap;
        }
      }

      .input {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        border: 1px solid #eee;
        padding: 6px 9px;
        box-sizing: border-box;
        font-size: 24rpx;
        border-radius: 10rpx;
        line-height: 36rpx;

        .placeholder {
          color: #ccc;
          font-size: 24rpx;
        }
      }
    }

    .date-range {
      position: relative;

      &::after {
        content: "";
        width: 100%;
        height: 100%;
        position: absolute;
        z-index: 1;
      }
    }
  }

  .popup__footer {
    display: flex;
    padding: 20rpx;
    box-shadow: 0 0 20rpx 0 rgba(0, 0, 0, 0.1);

    .up-btn:nth-child(1) {
      margin-right: 10rpx;
    }
  }
}


</style>
